<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="web">
			<audio autoplay="autoplay" loop="loop">
				<source src="music/we are.mp3" type="audio/mp3"></source>
			</audio>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					
					<div class="swiper-slide page page1">
						<div class="sunny">
							<img src="img/sunny.png" />
						</div>
						<div class="onepiece ani" swiper-animate-effect="bounceInLeft"swiper-animate-duration="1s" swiper-animate-delay="0.3s">
							<img src="img/onepiece.png" class="ani" swiper-animate-effect="rubberBand"swiper-animate-duration="1s" swiper-animate-delay="1.15s"/>
						</div>
						<div class="head">
							<img src="img/head.png" class="ani" swiper-animate-effect="bounceInDown"swiper-animate-duration="1s" swiper-animate-delay="0.8s"/>
						</div>
						<div class="family ani" swiper-animate-effect="rotateIn"swiper-animate-duration="1s" swiper-animate-delay="0.1s"/>
							<img src="img/family.png" class="ani" swiper-animate-effect="scalehere"swiper-animate-duration="3s" swiper-animate-delay="0.3s"/>
						</div>
						<div class="board">
							<img src="img/sunny-borad.png" />
						</div>
						<div class="sea"></div>
						<div class="beard">
							<img src="img/beard.png" />
						</div>
						<div class="card">
							<img src="img/card2.jpg" />
						</div>
						<div class="circle">
							<img src="img/circle.jpg" class="ani" swiper-animate-effect="rotate10"swiper-animate-duration="2s" swiper-animate-delay="0s"/>
						</div>
					</div>
					<div class="swiper-slide page page2">
						<div class="lufei ani" swiper-animate-effect="bounceInRight"swiper-animate-duration="2s" swiper-animate-delay="0.2s">
							<img src="img/lufei.png" />
						</div>
						<div class="font ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s" swiper-animate-delay="0.5s">
							<img src="img/font.png"/>
						</div>
					</div>
					<div class="swiper-slide page page3">
						<div class="suolong ani" swiper-animate-effect="slideInUp" swiper-animate-duration="2s" swiper-animate-delay="0s">
							<img src="img/suolong.png" />
						</div>
						<div class="font2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
							<img src="img/font2.png" />
						</div>
						<div class="namei ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="3s" swiper-animate-delay="1.5s">
							<img src="img/namei.png"/>
						</div>
						<div class="font3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="1.5s">
							<img src="img/font3.png"/>
						</div>
					</div>
					<div class="swiper-slide page page4">
						<div class="lobin ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="3s" swiper-animate-delay="0.5s">
							<img src="img/lobin.png" class="ani" swiper-animate-effect="scale1" swiper-animate-duration="3s" swiper-animate-delay="0.5"/>
						</div>
						<div class="border ani" swiper-animate-effect="rotatex2" swiper-animate-duration="3s" swiper-animate-delay="1s">
							<img src="img/border.png"/>
						</div>
						
						<div class="shanzhi ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="3s" swiper-animate-delay="0.5s">
							<img src="img/shanzhi.png" class="ani" swiper-animate-effect="rotatex1" swiper-animate-duration="3s" swiper-animate-delay="0.5"/>
						</div>
						<div class="border1 ani" swiper-animate-effect="rotatex2" swiper-animate-duration="3s" swiper-animate-delay="1s">
							<img src="img/border.png"/>
						</div>
						<div class="font4 ani" swiper-animate-effect="scale2" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
							<img src="img/font5.png" />
						</div>
						<div class="font5 ani" swiper-animate-effect="scale2" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
							<img src="img/font4.png" />
						</div>
					</div>
					<div class="swiper-slide page page5">
						<div class="qiaoba1 ani" swiper-animate-effect="run1" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">
							<img src="img/qiaoba1.png" />
						</div>
						<div class="border3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s">
							<img src="img/border2.png" />
						</div>
						<div class="font6 ani" swiper-animate-effect="run3" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s">
							<img src="img/font6.png" />
						</div>
						<div class="qiaoba2 ani" swiper-animate-effect="run2" swiper-animate-duration="2s" swiper-animate-delay="0.2s">
							<img src="img/qiaoba2.png" />
						</div>
						<div class="wusp ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">
							<img src="img/wusp.png"/>
						</div>
						<div class="border4 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.4s">
							<img src="img/border3.png"/>
						</div>
						<div class="font7 ani" swiper-animate-effect="run3" swiper-animate-duration="2s" swiper-animate-delay="1s">
							<img src="img/font7.png" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/index/common.js"></script>
		<script type="text/javascript" src="js/index/swiper-3.4.2.min.js" ></script>
		<script type="text/javascript" src="js/index/swiper.animate1.0.2.min.js" ></script>
		<script type="text/javascript">
			var swiper=new Swiper('.swiper-container',{
				direction:'vertical',
//				effect:'fade',
				loop:true,
				onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			  }, 
			  onSlideChangeEnd: function(swiper){ 
			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			  } 
     
			})
			
		</script>
	</body>
</html>
